<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">  
<head>  
<title>{{ get_app_inf key="siteName" }} - {{ $title }}</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />  
<!-- add your meta tags here -->  
  
<link href="css/my_layout.css" rel="stylesheet" type="text/css" />
<link href="css/photo.css" rel="stylesheet" type="text/css" />  
<!--[if lte IE 7]>  
<link href="css/my_patches/patch_my_layout.css" rel="stylesheet" type="text/css" />  
<![endif]-->  
<script type="text/javascript" src="script/jquery.js"><!-- jQuery 1.2.1 --></script>
<script type="text/javascript" src="script/jquery.form.js"><!-- 表单Ajax插件 --></script>
<script type="text/javascript" src="script/yav.js"><!-- 表单验证插件 --></script>
<script type="text/javascript" src="script/jquery.yav.pack.js"><!-- 表单验证插件 --></script>
<script type="text/javascript" src="script/jquery.confirm.js"><!-- 对话框插件 --></script>
<script type="text/javascript">
<!--
$(function(){

	// 按钮效果
	$("input:button").hover(function(){
		$(this).addClass("OMover");
	},function(){
		$(this).removeClass("OMover");
	});

	// 初始化选项卡
	Ztabs("#tabs","on","cont",28);
	
	// 添加一个文件夹
	$("#bt_albumCreate").click(function(){
		$.get("websetup.php",{
			controller : 'photos',
			action     : 'createalbum',
			name       : $("#add_albums_name").val()
		},function(){
			$("#add_albums_name").val('');
			_refresh_albumList();
			$("#tb-albumList").click();
		});
	});

	// 刷新相册列表
	_refresh_albumList();
});

// 刷新照片列表
function _refresh_photoList(albumID, pg){
	$.get("websetup.php",{
		controller : 'photos',
		action     : 'photolist',
		pg         : pg,
		album_id   : albumID
	},function(response){
		list = eval( '(' + response + ')' );
		
		// 清空它
		$("#toolbarcontent").appendTo("#toolbar");
		$("#photoList").empty();
		
		// 工具栏
		$("#photoList").append($("#toolbar").html());
		$("#toolbar").empty();
		$("#photoList .goUpload").attr("href","{{ url controller=upload action=index }}&album_id=" + albumID);
		
		// 删除整个相册
		$(".removeAlbum").click(function(){
			_removeAlbum(albumID);
		});
			// 显示confirm对话框
			$('.removeAlbum').confirm({
				msg:'<img src="images/alert.gif" style="border:0" /> ',
				eventType:'click',
				timeout:3000,
				dialogShow:'fadeIn',
				buttons: {
					ok:'确认',
					cancel:'取消',
					separator:' | ',
					wrapper:'<a href="#"></a>'
				}
			});
			
		// 填充相册
		$.each(list.photos,function(i,value){
			$("#photoList").append("<div class='imgbox'><img photoID='" + i + "' src='" + value.dir + value.s + "' /><div class='imgname'>" + value.name + "</div></div>");
		});
		if(!list.photos[0]){
			$("#photoList").append("这还是一个空相册呢");
		}
		$("#photoList").append("<div style='clear:both'></div>");
		
		// 填充分页导航栏
		$("#pagenav").empty();
		$("#pagenav").append("<ul>");
		if( list.nav.prevPage < list.nav.currentPage ){
			$("#pagenav").append("<li class='navlink' pg='" + list.nav.prevPage + "'><a href='#'>&#171; 上页</a></li>");
		}
		// 总页数>7
		if( list.nav.pageCount > 7 ){
			// 当前页码小于5
			if( list.nav.currentPageNumber <= 5 ){
				for (i=1; i<=5; i++){
					if(i!=list.nav.currentPageNumber){
						$("#pagenav").append("<li class='navlink' pg='" + (i-1) + "'><a href='#'>" + i + "</a></li>");
					}else{
						$("#pagenav").append("<li class='current'>" + i + "</li>");
					}
				}
				// 省略
				$("#pagenav").append("<li class=\"none\">...</li>");
				// 最后一个
				$("#pagenav").append("<li class='navlink' pg='" + list.nav.lastPage + "'><a href='#'>" + list.nav.lastPageNumber + "</a></li>");
			}
			// 当前页码居中
			if( list.nav.currentPageNumber > 5 && list.nav.currentPageNumber <= list.nav.pageCount-5 ){
				// 第一个
				$("#pagenav").append("<li class='navlink' pg='" + list.nav.firstPage + "'><a href='#'>" + list.nav.firstPageNumber + "</a></li>");
				// 省略号
				$("#pagenav").append("<li class=\"none\">...</li>");
				for (i=list.nav.currentPageNumber-2; i<=list.nav.currentPageNumber+2; i++){
					if(i!=list.nav.currentPageNumber){
						$("#pagenav").append("<li class='navlink' pg='" + (i-1) + "'><a href='#'>" + i + "</a></li>");
					}else{
						$("#pagenav").append("<li class='current'>" + i + "</li>");
					}
				}
				// 省略号
				$("#pagenav").append("<li class=\"none\">...</li>");
				// 最后一个
				$("#pagenav").append("<li class='navlink' pg='" + list.nav.lastPage + "'><a href='#'>" + list.nav.lastPageNumber + "</a></li>");
			}
			// 当前页码居末尾
			if( list.nav.currentPageNumber > list.nav.pageCount-5 ){
				// 第一个
				$("#pagenav").append("<li class='navlink' pg='" + list.nav.firstPage + "'><a href='#'>" + list.nav.firstPageNumber + "</a></li>");
				// 省略
				$("#pagenav").append("<li class=\"none\">...</li>");
				for (i=list.nav.pageCount-4; i<=list.nav.pageCount; i++){
					if(i!=list.nav.currentPageNumber){
						$("#pagenav").append("<li class='navlink' pg='" + (i-1) + "'><a href='#'>" + i + "</a></li>");
					}else{
						$("#pagenav").append("<li class='current'>" + i + "</li>");
					}
				}
			}
		}else{
			// 页码总数小于7
			$.each(list.nav.pagesNumber, function(i,value){
				if( i!=list.nav.currentPage ){
					$("#pagenav").append("<li class='navlink' pg='" + i + "'><a href='#'>" + value + "</a></li>");
				}else{
					$("#pagenav").append("<li class='current'>" + value + "</li>");
				}
			});
		}
		if( list.nav.nextPage > list.nav.currentPage ){
			$("#pagenav").append("<li class='navlink' pg='" + list.nav.nextPage + "'><a href='#'>下页 &#187;</a></li>");
		}
		$("#pagenav").append("</ul><div style='clear:both'></div>");
		
		// 点击分页导航栏
		$(".navlink").click(function(){
			currentpg = $(this).attr("pg");
			_refresh_photoList(albumID, currentpg);
			return false;
		});
		
		// 点击图片
		$("#photoList img").click(function(){
			if(!$("#tb-photo").html()){
				$("#tabs").append("<h2 id='tb-photo'>" + $(this).nextAll(".imgname").html() + "</h2><div id='photo'></div>");
				Ztabs("#tabs","on","cont",28);
			}else{
				$("#tb-photo").html($(this).nextAll(".imgname").html());
			}
			photoID = $(this).attr("photoID");
			_refresh_photo(list.photos[photoID],photoID);
			$("#tb-photo").click();
		});

	});
}

// 刷新图片详情标签
function _refresh_photo(photo,id){
	
	// 把图片修改表单弄走
	_movebackphotoform();
	$("#photo").empty();
	$("#photo").append("<img id='loading' src='images/loading.gif' />");
	$("#photo").append("<div id='thisimg'><img src='" + photo.dir + photo.b + "' onload='resizePhoto(this)' /><div>");
	
	//右侧控制栏
	$("#photoCtlform").appendTo("#photo");
	
	//填充修改表单
	$("#fm-updatephoto input[name='photo_id']").val(photo.photo_id);
	$("#fm-updatephoto input[name='name']").val(photo.name);
	$("#fm-updatephoto textarea").val(photo.description);
	
	$("#photo").append("<div style='clear:both'></div>");
	
	//点击更新按钮
	$("#updatePhoto").click(function(){
		$("#fm-updatephoto").ajaxSubmit({
			success : function(){
				// 修改已经获得的json数据
				list.photos[id].name = $("#fm-updatephoto input[name='name']").val();
				list.photos[id].description = $("#fm-updatephoto textarea").val();
				$("#editmsg").text("已经完成对图片信息的修改").show("slow");
				setTimeout(hideme,3000);
			},
			url : "{{ url controller=photos action=updatephoto }}",
			type : "post"
		});
	});
	
	//关闭图片选项卡
	$("#closePhotoTab").click(function(){
		_movebackphotoform();
		$("#tb-photo").remove();
		$("#photo").remove();
		Ztabs("#tabs","on","cont",28);
		$("#tb-photoList").click();
	});
	
	// 删除图片
	$("#removePhoto").click(function(){
		$.get("{{ url controller=photos action=removephoto }}",{
			photo_id : photo.photo_id
		},function(){
			// 关闭图片选项卡
			$("#closePhotoTab").click();
			// 从DOM中删除图片
			$("#photoList img[photoID=" + id + "]").parent().remove();
		});
	});
		// 显示confirm对话框
		$('#removePhoto').confirm({
			msg:'<img src="images/alert.gif" style="border:0" /> 确认删除吗？ ',
			eventType:'click',
			timeout:3000,
			dialogShow:'fadeIn',
			buttons: {
				ok:'确认',
				cancel:'取消',
				separator:' ',
				wrapper:'<button></button>'
			}
		});

}
function hideme(){
	$("#editmsg").hide("slow");
}
function _movebackphotoform(){
	$("#fm-updatephoto input[name='name']").val("");
	$("#fm-updatephoto textarea").val("");
	$("#photoCtlform").appendTo("#photoCtl");
}
// 重设图片尺寸
function resizePhoto(obj){
	$("#loading").remove();
	width = 600;
	height = 400;
	imgwidth = obj.width;
	imgheight = obj.height;
	
	//宽>高
	if(imgwidth>imgheight){
		// 宽超标，限制其宽度
		if(imgwidth > width){
			$(obj).css({display:"block",width:"600px"});
		}
	//宽<高	
	}else{
		// 高超标，限制其高度
		if(imgwidth > width){
			$(obj).css({display:"block",height:"400px"});
		}
	}
	divw = obj.width;
	divh = obj.height;
	$("#thisimg").css("border","4px solid #FFF");
	$("#thisimg").css("width",divw);
	$("#thisimg").css("height",divh);
}


// 刷新相册列表标签
function _refresh_albumList(){

	$.get("websetup.php",{
		controller : 'photos',
		action     : 'albumlist'
	},function(response){
		list = eval( '(' + response + ')' );
		
		$("#albumList").empty();
		
		$.each(list,function(i,value){
			if(value.coverpic==null){
				value.coverpic = 'script/img/empty.gif';
			}
			//填充相册列表
			$("#albumList").append("<div class='albumbox' album_id='" + value.album_id + "'><div class='album_cover'><img src='" + value.coverpic + "' /></div><div class='album_name'>" + value.name +  "</div></div>");
		});
		
		$("#albumList").append("<div style='clear:both'></div>");
		
		// 点击相册显示相册图片列表
		$(".album_cover").click(function(){
			if(!$("#tb-photoList").html()){
				$("#tabs").append("<h2 id='tb-photoList'>" + $(this).nextAll(".album_name").html() + "</h2><div id='photoList'></div>");
				Ztabs("#tabs","on","cont",28);
			}else{
				$("#tb-photoList").html($(this).nextAll(".album_name").html());
			}
			albumID = $(this).parent().attr('album_id');
			_refresh_photoList(albumID,0);
			$("#tb-photoList").click();
		});
		
		// 点击修改相册名称
		$(".album_name").dblclick(function(){
			// 在不可编辑状态下执行
			if(!$(this).find("input").val()){
				name = $(this).html();
				$(this).empty().append("<input type='text' value='" + name + "' />");
				$(this).focus();
				
				// 文本框blur时保存修改后的相册名
				$(this).find("input").blur(function(){
					name = $(this).val();
					albumID = $(this).parents(".albumbox").attr("album_id");
					$.get("{{url controller=photos action=renamealbum }}",{
						name : name,
						album_id : albumID
					},function(response){
					});
					$(this).parent().empty().append(name);
				});
				
			}
		});
		
	});
}

// 删除整个相册
function _removeAlbum(albumID){

	//清空当前photoList标签
	$("#toolbarcontent").appendTo("#toolbar");
	$("#photoList").empty();
	
	//添加一个等待中图片
	$("#photo").append("<img id='loading' src='images/loading.gif' />");
	
	$.get("{{ url controller=photos action=removealbum }}",{
		album_id : albumID
	},function(response){
		// 关闭标签
		$("#tb-photoList").remove();
		$("#photoList").remove();
		Ztabs("#tabs","on","cont",28);
		// 刷新相册列表
		_refresh_albumList();
	});
}


/**
 * Ztabs选项卡函数 - By Zehee
 * Tid - 选项卡外层ID,页面中唯一的钩子
 * TitleOn - 选项卡选中时的样式名称
 * Cont - 内容区的样式名称
 * M - 选项之间的间距
 */
function Ztabs(Tid,TitleOn,Cont,M){
	var titles = $(Tid).children("h2");
	titles.css({cursor:"hand",cursor:"pointer"});
	$(Tid).css({position:"relative"});
	titles.css({position:"absolute",top:"0",zoom:"100%"});
	$(Tid).children("div").addClass(Cont).hide();
	$(Tid).children("div:first").show();
	if(!titles.hasClass(TitleOn)){
		$(Tid).children("h2:first").addClass(TitleOn);
	}
	titles.each(function(){
		$(this).bind("click",function(){ //可更换为Mouseover形式
			titles.removeClass(TitleOn);
			$(this).addClass(TitleOn);
			$(Tid).children("div").hide();
			$(this).next("div").show() // 可更换为其他动画形式
		});
	});
	for(var i = 1;i < titles.length;i ++){
		$(titles[i]).css("left",$(titles[i-1]).offset().left - $(Tid).offset().left + $(titles[i-1]).width() + M + "px")
	}
}

//-->
</script>

</head>  


<body> 
  <div id="page_margins">

    <div id="border-top">
      <div id="edge-tl"></div>
      <div id="edge-tr"></div>
    </div>
    <div id="page">
      {{ include file="admin/Websetup_header.html" }}
      <div id="main">
        <div id="col3">
          <div id="col3_content" class="clearfix">
            	{{ include file="Photo_tabs.html" }}
          </div>
          <!-- IE Column Clearing -->
          <div id="ie_clearing"> &#160; </div>
        </div>
      </div>
      <!-- begin: #footer -->
      {{ include file="admin/Websetup_footer.html" }}
    </div>
    <div id="border-bottom">
      <div id="edge-bl"></div>
      <div id="edge-br"></div>
    </div>
  </div>
</body>
</html>